import styled from '@emotion/styled'
import React, { useEffect } from 'react'

interface VideoProps {
    width: number;
    height: number;
    stream: MediaStream | null
}

const VideoContainer = styled.div`
    justify-content: center;
    text-align: center;
`;

const VideoPreview = (props: VideoProps) => {
    const { width = 480, height = 320, stream } = props;

    useEffect(() => {
        const video = document.getElementById('prew-video-container') as HTMLVideoElement;
        if (video) {
            video.srcObject = stream;
            video.play();
        }
    }, [stream])

    return (
        <VideoContainer>
            <video id='prew-video-container' autoPlay muted width={width} height={height}></video>
        </VideoContainer>
    )
}

export default VideoPreview